.photo-razorcms-photo-gallery
{
	.photo-gallery-frame
	{
		margin-left: auto;
		margin-right: auto;
		padding: 0px;
		width: 100%;
		height: 300px;
		position: relative;

		.photo-gallery-canvas
		{
			width: 100%;
			height: 100%;
			max-width: 100%;
			display: inline-block;

			.photo-details
			{
				position: absolute;
				top: 0px;
				width: 100%; 

				.details-box
				{
					display: inline-block;
					padding: 5px 10px 0px 10px;
					background-color: rgba(0, 0, 0, 0.5);
					color: #fff;
					margin-top: 1px;
					opacity: 0;

					-webkit-transition: opacity 0.3s ease-in;
					-moz-transition: opacity 0.3s ease-in;
					-ms-transition: opacity 0.3s ease-in;
					-o-transition: opacity 0.3s ease-in;
					transition: opacity 0.3s ease-in;

					&.show-box
					{
						opacity: 1;
					}
				}
			}

			.center-box
			{
				width: 100%;
				max-width: 100%;
				height: 100%;
				display: inline-block;
				line-height: 100%;
				vertical-align: middle;
				text-align: center;

				img
				{
					max-width: 100%;
					max-height: 100%;
					box-shadow: 0px 0px 10px #999;

					&.turn-photo
					{
					    -webkit-animation: turn-photo 0.6s forwards;
					    -moz-animation: turn-photo 0.6s forwards;
					    -ms-animation: turn-photo 0.6s forwards;
					    -o-animation: turn-photo 0.6s forwards;
					    animation: turn-photo 0.6s forwards;
					}
				}

				.photo-placeholder
				{
					font-size: 150px;
					line-height: inherit;
					color: #ddd;
				}
			}

			.photo-control
			{
				font-size: 50px;
				position: absolute;
				top: 125px;
				opacity: 0.1;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 5px;
				width: 50px;
				height: 50px;
				color: #fff;
				cursor: pointer;

				&.change-left { left: 0px; }
				&.change-right { right: 0px; }
			}
		}
			
		&:hover
		{
			.photo-gallery-canvas .photo-control { opacity: 1; }
		}
	}

	.photo-gallery-controls
	{
		margin-top: 10px;
		margin-left: auto;
		margin-right: auto;
		padding: 0px 50px;
		width: 100%;
		height: 85px;
		position: relative;

		.photo-control
		{
			font-size: 50px;
			position: absolute;
			top: 18px;
			cursor: pointer;

			&.slide-left { left: 0px; }
			&.slide-right { right: 0px; }
		}

		.photo-gallery-slider
		{
			overflow: hidden;
			height: 85px;

			.photo-gallery-thumbs
			{
				list-style-type: none;
				text-align: center;
				padding: 0px;
				height: 85px;

				// ease transiation of slider
				-webkit-transition: margin-left .15s ease-in-out;
				-moz-transition: margin-left .15s ease-in-out;
				-ms-transition: margin-left .15s ease-in-out;
				-o-transition: margin-left .15s ease-in-out;
				transition: margin-left .15s ease-in-out;

				li
				{
					margin: 5px;
					display: inline-block;
					height: 85px;
					float: left;
					line-height: 73px;

					img
					{
						width: 75px;
						border-radius: 3px;
						border: 5px solid #ddd;
						cursor: pointer;

						&:hover, &.selected { border-color: #6291CC; }
					}
				}
			}
		}
	}
}

@-webkit-keyframes turn-photo 
{
    0% 
    { 
    	opacity: 1;
	    -webkit-transform: rotateX(0deg) rotateY(0deg);
	    -webkit-transform-origin: right top 0;
   	}
   	20% { opacity: 0; }
    30% 
    {     	
	    -webkit-transform: rotateX(30deg) rotateY(30deg);
		-webkit-transform-origin: right top 0;
	}
    50%
    {
	    -webkit-transform: rotateX(-30deg) rotateY(30deg);
	    -webkit-transform-origin: left top 0;
    }
    60% { opacity: 0; }
    100% 
    { 
    	opacity: 1;
	    -webkit-transform: rotateX(0deg) rotateY(0deg);
	    -webkit-transform-origin: left top 0;
    }  
}

@-moz-keyframes turn-photo 
{
    0% 
    { 
    	opacity: 1;
	    -moz-transform: rotateX(0deg) rotateY(0deg);
	    -moz-transform-origin: right top 0;
   	}
   	20% { opacity: 0; }
    30% 
    {     	
	    -moz-transform: rotateX(30deg) rotateY(30deg);
	    -moz-transform-origin: right top 0;
    }
    50%
    {
	    -moz-transform: rotateX(-30deg) rotateY(30deg);
	    -moz-transform-origin: left top 0;
    }
    60% { opacity: 0; }
    100% 
    { 
    	opacity: 1;
	    -moz-transform: rotateX(0deg) rotateY(0deg);
	    -moz-transform-origin: left top 0;
    }  
}

@-ms-keyframes turn-photo 
{
    0% 
    { 
    	opacity: 1;
	    -ms-transform: rotateX(0deg) rotateY(0deg);
	    -ms-transform-origin: right top 0;
   	}
   	20% { opacity: 0; }
    30% 
    {     	
	    -ms-transform: rotateX(30deg) rotateY(30deg);
	    -ms-transform-origin: right top 0;
    }
    50%
    {
	    -ms-transform: rotateX(-30deg) rotateY(30deg);
	    -ms-transform-origin: left top 0;
    }
    60% { opacity: 0; }
    100% 
    { 
    	opacity: 1;
	    -ms-transform: rotateX(0deg) rotateY(0deg);
	    -ms-transform-origin: left top 0;
    }  
}

@-o-keyframes turn-photo 
{
    0% 
    { 
    	opacity: 1;
	    -o-transform: rotateX(0deg) rotateY(0deg);
	    -o-transform-origin: right top 0;
   	}
   	20% { opacity: 0; }
    30% 
    {     	
	    -o-transform: rotateX(30deg) rotateY(30deg);
	    -o-transform-origin: right top 0;
    }
    50%
    {
	    -o-transform: rotateX(-30deg) rotateY(30deg);
	    -o-transform-origin: left top 0;
    }
    60% { opacity: 0; }
    100% 
    { 
    	opacity: 1;
	    -o-transform: rotateX(0deg) rotateY(0deg);
	    -o-transform-origin: left top 0;
    }  
}

@keyframes turn-photo 
{
    0% 
    { 
    	opacity: 1;
	    transform: rotateX(0deg) rotateY(0deg);
	    transform-origin: right top 0;
   	}
   	20% { opacity: 0; }
    30% 
    {     	
	    transform: rotateX(30deg) rotateY(30deg);
	    transform-origin: right top 0;
    }
    50%
    {
	    transform: rotateX(-30deg) rotateY(30deg);
	    transform-origin: left top 0;
    }
    60% { opacity: 0; }
    100% 
    { 
    	opacity: 1;
	    transform: rotateX(0deg) rotateY(0deg);
	    transform-origin: left top 0;
    }  
}